<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f(a,b,c){
            var currentDom=document.getElementById(a);//希望展示出来的元素
            var bDom=document.getElementById(b);//另外两个隐藏的元素
            var cDom=document.getElementById(c);//另外两个隐藏的元素

            //点击的时候，有2种情况

            // 1.当前元素处于隐藏状态
            if(currentDom.style.display=="none"){
                currentDom.style.display="block";//当前元素显示

                //另外两个元素进行隐藏
                bDom.style.display="none";
                cDom.style.display="none";
                return;

            }
            // 2.当前元素处于显示状态，希望将其隐藏
            currentDom.style.display="none";

        }
    </script>
</head>
<body>
    <h2 onclick="f('u1','u2','u3')">您最喜欢的动画片</h2>
    <ul id="u1" style="display: none;">
        <li>喜洋洋与灰太狼</li>
        <li>大头儿子小头爸爸</li>
        <li>大耳朵图图</li>
    </ul>
    <h2 onclick="f('u2','u1','u3')">您最喜欢的电影</h2>
    <ul id="u2">
        <li>虎虎生威</li>
        <li>龙年大吉</li>
        <li>兔年顶呱呱</li>
    </ul>
    <h2 onclick="f('u3','u1','u2')">您最喜欢的综艺节目</h2>
    <ul  id="u3" style="display: none;">
        <li>跑男</li>
        <li>极限挑战</li>
        <li>快乐大本营</li>
    </ul>
</body>
</html>